   // 多元素运动

    // 问题: 由于现在animate() 方法公有一个计时器编号(timer),如果有多个元素需要同时运动, 启动下一个时,上一个会被清除 => 如何让多个元素同时运动(相互之间不影响)


    // ele    => 运动的元素
    // cssKey => 运动的css属性
    // end    => 终点 (如果有单位px => 去单位)
    // aniType => 运动的方式 (linear  ease-in  ease-out  )
    // callback  => 运动结束时执行的回调函数
    function animate(ele, cssKey, end, aniType = "linear", callback) {
        // cur => 局部变量   =>  a. 记录小球的当前位置(初始位置)  b. 每隔固定时间之后移动的位置 

        // var cur = ele.offsetTop;  // offsetTop offsetLeft clientWidth clientHeight =>快捷取值
        // var cur = getVal(ele,"top");

        var cur = getVal(ele, cssKey);

        end = parseFloat(end); // (如果有单位px => 去单位)


        var speed = 0;


        // 为了防止每次点击 都启动新的计时器 => 开启下一次之前,先清除上一个 => 保证只有一个计时器

        // 多元素运动解决方法
        // 想让每个元素的运动都是独立的 -> 相互之间互不影响 => 每个元素运动时都要有自己的计时器及其编号 

        // 1. 将timer变成局部变量 => 每次都是新的  => 缺点 => 计时器无法被清除

        // 2. 将计时器的编号 存储到运动的元素上 => 让元素自己记录
        // 原理: 元素节点是一个对象  对象中可以新增属性

        // var obj = {}
        // obj.a = 1;
        // obj.b = 2;

        // 给运动的元素(对象),新增属性timer 记录计时器的编号 (对象.xxx = 111)
        clearInterval(ele.timer);
        ele.timer = setInterval(() => {

            if (aniType == "linear") { //   // 匀速运动

                if (end > cur) {  // 正向运动
                    speed = 10;
                } else if (end < cur) { // 反向运动
                    speed = -10;
                } else { // end == cur 
                    speed = 0;  // end == cur  已经在终点 => 跑个鬼
                }

            } else if (aniType == "ease-in") { // 加速运动
                if (end > cur) {  // 正向运动
                    speed += 1;
                } else if (end < cur) { // 反向运动
                    speed -= 1;
                } else { // end == cur 
                    speed = 0;  // end == cur  已经在终点 => 跑个鬼
                }
            } else if (aniType == "ease-out") {
                // 缓冲运动
                // 每天走剩余 n / 1  =>  (终点值 - 当前值) / n   => n就是缓冲因子
                // 缓冲因子 一般设置为8-12

                // 缺点:  每天走剩余 n / 1 => 永远到不了终点  => 可以在 |speed| < 1 是 走1像素 

                // 缓冲运动
                if (end > cur) {  // 正向运动
                    speed = (end - cur) / 10;
                    speed = Math.ceil(speed);  // 0.1 向上取值 1
                } else if (end < cur) { // 反向运动
                    speed = (end - cur) / 10;
                    speed = Math.floor(speed);  // -0.1 > -1 => 向下取值才能=>-1
                } else { // end == cur 
                    speed = 0;  // end == cur  已经在终点 => 跑个鬼
                }
            }

            // console.log(speed);

            cur += speed;  // 相对于当前位置移动
            ele.style[cssKey] = cur + "px";

            if (Math.abs(end - cur) <= Math.abs(speed)) { // 临界值判断 -> 运动到达终点
                clearInterval(ele.timer);
                ele.style[cssKey] = end + "px";

                if (callback && typeof callback == "function") { //  到达终点值 执行传入的回调函数
                    callback();
                }

            }

        }, 10);

    }

    function getStyle(ele, cssKey) {
        return window.getComputedStyle(ele)[cssKey];
    }

    function getVal(ele, cssKey) {
        return parseFloat(getStyle(ele, cssKey));
    }

